<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: xywen
  Date: 2017/6/1
  Time: 16:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .context-top-title {
        clear: both;
        height: 18px;
        padding: 20px 20px 20px 0px;
        border-bottom: 1px solid #e4e4e4;
    }

    .context-top-title p {
        float: left;
        font-size: 14px;
    }

    .context-top-title b {
        float: right;
        color: #919191;
        font-size: 12px;
        font-weight: 100;
    }

    .borrowBox {
        height: 210px;
        border-bottom: 1px solid #e4e4e4;
        margin-bottom: 20px;
        clear: both;
    }

    .borrowBox_context {
        width: 70%;
        float: left;
    }

    .borrowBox_cont {
        border-bottom: 1px solid #e4e4e4;
        padding: 10px 20px 10px 0;
        line-height: 24px;
    }

    .borrowBox_cont td {
        border-right: 1px solid #e4e4e4;
        padding-left: 20px;
    }

    .borrowBox_cont strong {
        display: block;
        color: #ff4545;
        margin-bottom: 5px;
    }

    .borrowBox_right {
        padding: 20px;
        border-left: 1px solid #e4e4e4;
        height: 170px;
        width: 200px;
        float: right;
    }

    .progress {
        height: 15px;
        margin-bottom: 10px;
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    }

    .progress-bar {
        float: left;
        width: 0;
        height: 100%;
        font-size: 12px;
        line-height: 15px;
        color: #fff;
        text-align: center;
        background-color: #428bca;
        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
        -webkit-transition: width .6s ease;
        -o-transition: width .6s ease;
        transition: width .6s ease;
    }

    .button-lg {
        color: #fff;
        font-size: 22px;
        padding: 8px 30px;
        text-decoration: none;
        border: 0px;
    }
    .button-disabled {
        background: #8E8E8E;
    }
</style>
<div class="w" style="box-shadow: 10px 10px 10px -10px">
    <div class="context-top-title">
        <p>${borrowInfo.name}</p>
        <b>项目编号：${borrowInfo.no}</b>
    </div>
    <div class="borrowBox">
        <div class="borrowBox_context">
            <p>合作机构：${borrowInfo.memberInfo.username}</p>
            <div class="borrowBox_cont">
                <table>
                    <tr>
                        <td valign="top">剩余可投金额：<strong>${borrowInfo.totalMoney - borrowInfo.investMoney}</strong></td>
                        <td valign="top" style="width: 120px;">年化收益<strong><fmt:formatNumber
                                value="${borrowInfo.investRate}"/> </strong>奖励返现：<strong>null</strong></td>
                        <td valign="top" style="width: 120px;">月收益率<strong><fmt:formatNumber
                                value="${borrowInfo.investRate / 12}"/></strong>续投奖励<strong></strong></td>
                        <td valign="top">
                            期限<strong>${borrowInfo.period}</strong>还款方式:<strong>${borrowInfo.paymentMethod}</strong>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="borrowBox_time">
                <span>发标金额：${borrowInfo.totalMoney}</span>|<span>发标时间:${borrowInfo.publishTime}</span>
            </div>
        </div>
        <div class="borrowBox_right">
            <div style="padding-bottom: 30px;">
                <p>
                    可投余额
                    <br>
                    投100元可获收益:2.01元
                </p>
                <div class="progress">
                    <div class="progress-bar" style="width: 100%;">
                        100%
                    </div>
                </div>
                <div style="text-align: center;height: 50px;">
                    <button class="button-lg button-disabled" type="button" disabled="">还款中</button>
                    <button class="button-lg button-primary" onclick="userTender();" type="button" id="buttonSubmit">立即投标</button>
                </div>
            </div>
        </div>
    </div>
    <div class>

    </div>
</div>

<div id="borrowTenderForm" title="用户投标">
    <form>
        <div>
            <label>用户投标</label>
            <div>
                <input>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    var borrowTenderDialog;
    $(document).ready(function(){
        borrowTenderDialog = $("#borrowTenderForm").dialog({
            autoOpen:false,
            modal:true,
            buttons:{
                "create an acccount":tenderOk,
                Cancel:function(){
                    borrowTenderDialog.dialog("close");
                }
            }
        });
    });
    function userTender(){
        borrowTenderDialog.dialog("open");
    }
    function tenderOk(){

    }
</script>